<style lang="less" scoped>
/* 定义动画 */
@keyframes enter {
  25% {
    background: rgba(131 131 145 / 13%);
  }
  50% {
    background: rgb(131 131 145 / 23%);
  }
  75% {
    background: rgb(131 131 145 / 33%);
  }
  100% {
    background: rgb(131 131 145 / 43%);
  }
}
html,body,app {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0;
  /*外部间距也是如此设置*/
  margin: 0;
  /*统一设置高度为100%*/
  height: 100%;
  .common-layout {
    // 用100vw会出现左右滚动条
    width: 99vw;
    height: 100vh;
    background: -moz-linear-gradient(to bottom, #f3f5f8, #fff);
    background: linear-gradient(to bottom, #f3f5f8, #fff);
    .header {
      margin-top: 10px;
      height: 50px;
      .video-logo {
        margin-left: 50px;
        width: 13%;
        border-radius: 10px;
        height: 100%;
        .logo {
          margin-top: 5px;
          margin-left: 5px;
          height: 40px;
          width: 60px;
          display: block;
          vertical-align: middle;
        }
      }
      .video-logo:hover {
        background-color: #00a1d6;
      }
      .bew-popover {
        display: none;
        width: 600px;
        height: 0;
        z-index: 1;
        backdrop-filter: blur(20px) saturate(180%);
        position: absolute;
        box-sizing: border-box;
        --un-shadow: 0 20px 25px -5px rgb(0 0 0 / .14), 0 8px 10px -6px rgb(0 0 0 / .12);
        box-shadow: 0 0 rgb(0 0 0 / 0), 0 0 rgb(0 0 0 / 0), var(--un-shadow);
        overflow: visible;
        background-color: hsl(0 0% 100% / .8);
        border-radius: 12px;
        top: 70px !important;
        left: 70px !important;
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: 1s;

        .subject-class-ul {
          width: 100%;
          height: 100%;
          margin-right: calc(14px * .25);
          display: block;
          list-style-type: disc;
          padding-inline-start: 25px;
          // 让超出ul范围的li自动换行
          flex-wrap: wrap;
          .subject-class-li {
            height: 40px;
            width: 150px;
            line-height: 40px;
            margin-top: 10px;
            display: inline-block;
            word-break:break-all;
            word-wrap : break-word ;
            .subject-class-li-a {
              display: flex;
              color: inherit;
              text-decoration: inherit;
            }
          }
        }
        ul,li {
          list-style: none;
          margin: 0;
          padding: 0;
        }
      }
      .video-search-box {
        width: 95%;
        height: 100%;
        margin-left: 15px;
        display: flex;
        align-content: center;
        position: relative;
        .video-search {
          width: 100%;
          height: 100%;
        }
        .video-search-icon{
          cursor: pointer;
          position: absolute;
          top: 15px;
          right: 10px;
          width: 20px;
          height: 20px;
        }
        // 修改el-input圆角
        .video-search /deep/ .el-input__wrapper {
          border-radius: 50px;
        }
      }

      .info {
        //width: 40%;
        height: 100%;
        float: right;
        border-radius: 50px;
        margin-right: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .header /deep/ .el-card__body {
      padding: 0;
    }

    .main-box {
      width: 1450px;
      margin: 0 auto;
      position:relative;
      padding: 0;
      .main-title {
        margin-top: 20px;
        display: flex;
        .main-title /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {// 修改按钮激活样式
          color: #fff;
          background-color: #f63;
          border-color: #f63;
          box-shadow: -1px 0 0 0 #f63;
        }
        :deep(.el-radio-button__inner) {
          width: 85px;
          height: 34px;
          border-radius: 10px;
        }
        :deep(.el-radio-button__inner:hover) {
          border-color: #00a1d6;
          background-color: #00a1d6;
          color: #fff;
        }
      }
      .main-title /deep/ .el-card__body {
        padding: 0;
      }
      .video-area{
        width: 100%;
        height: 100%;
        .page-select {
          margin-top: 15px;
          float: right;
        }
        .video {
          display: block;
          position: relative;
          margin-top: 20px;
          width: 280px;
          height: 280px;
          .video-cover {
            display: block;
            position: relative;
            width: 275px;
            height: 155px;
            border-radius: 10px;
            .cover {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
            .img-mask {
              position: absolute;
              background: rgba(101, 101, 101, 0.6);
              color: #ffffff;
              opacity: 0;
              top: 0;
              right: 0;
              width: 100%;
              height: 100%;
              border-radius: 10px;
              pointer-events:none;
            }
            .img-mask h3 {
              text-align: center;
              margin-top: 25%;
            }
          }
          .video-cover:hover .img-mask {
            opacity: 1;
          }
          .video-info {
            width: 280px;
            height: 100px;
            margin-top: 15px;
            .detail {
              width: 50%;
              display: flex;
              justify-content: space-between;
            }
            .title-font-size {
              font-size: 16px;
            }
            .info-font-size {
              font-size: 14px;
            }
            .video-date {
              width: 100%;
              height: 20px;
              .video-date-text {
                padding: 0 7px;
                background-color: #83839121;
                color: #3A455599;
                border-radius: 10px;
              }
            }
          }
          .video-mask {
            position: absolute;
            color: #ffffff;
            opacity: 0;
            top: 0;
            right: 0;
            width: 285px;
            height: 280px;
            border-radius: 10px;
            pointer-events:none;
            transition: all 0.3s ease-in-out;
            /* 动画延迟为0，持续时间为2秒 */
            animation: enter 0.5s forwards ;
            animation-play-state: paused;
          }
        }
        .video:hover .video-mask {
          opacity: 1;
          cursor: pointer;
          animation-play-state: running;
        }
      }
    }
  }
  :deep(.el-loading-spinner) {
    /* 图片替换为你自定义的即可 */
    background: url('../../../assets/icon/gptLoading.gif') no-repeat;
    background-size: 100px 100px;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
  }
  :deep(.el-loading-spinner .circular) {
    width: 0px;
    height: 0px;
    animation: loading-rotate 2s linear infinite;
    display: none;
  }
}
</style>

<template>
  <div class="common-layout">
    <el-container class="outer-box">
<!--      头部搜索框-->
      <el-header style="margin-top: 2em">
        <el-row :gutter="24" class="header">
          <el-col :span="8">
            <el-card class="video-logo" @mouseenter="cardChangeActive($event)" @mouseleave="cardRemoveActive($event)">
              <img
                  src="../../../assets/image/logo.png"
                  style="width: 70%;height: 70%;margin-left: 10px;"
              />
            </el-card>
            <div class="bew-popover" @mouseenter="popoverChangeActive($event)" @mouseleave="popoverRemoveActive($event)">
              <ul class="subject-class-ul">
                <li v-for="(item,index) in subjectClass" :key="index" class="subject-class-li">
                  <a href="#" class="subject-class-li-a" @click="getTargetSubjectVideo(item.title)">
                    <span style="width: 20px;height: 20px;margin-top: 3px;margin-right: 10px">
                      <img :src="'/src/assets/icon/video/' + item.icon" alt="" style="width: 100%;height: 100%">
                    </span>
                    <span style="font-size: 16px">{{item.title}}</span>
                  </a>
                </li>
              </ul>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="video-search-box">
              <el-input v-model="searchContent" class="video-search"></el-input>
              <el-icon class="video-search-icon">
                <Search></Search>
              </el-icon>
            </div>
          </el-col>

          <el-col :span="8">
            <el-card class="info">
              <el-button type="success" @click="backMyVideo" round v-if="isPermission(2)" style="margin-left: 10px;">我的视频</el-button>
              <el-button type="primary" round @click="backHome()" style="margin-right: 10px;">返回主页</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-header>
<!--      主体-->
      <el-main class="main-box">
        <div class="main-title">
          <el-radio-group :fill="'#00a1d6'" :text-color="'#fff'" v-model="tabPosition" @change="getVideo">
            <el-radio-button class="main-title-tab" label="个性推荐" value="个性推荐"></el-radio-button>
            <el-radio-button class="main-title-tab" label="热门视频" value="热门视频" style="margin-left: 10px"></el-radio-button>
          </el-radio-group>
        </div>
<!--        居中-->
        <div class="video-area">
          <el-space wrap>
            <div class="video" v-for="(item,index) in videoItems" :key="index" @click="clickVideo(item.id)">
              <div class="video-cover">
                <img :src=item.cover alt="" class="cover"/>
                <div class="img-mask">
                  <h3><el-icon size="40">
                    <VideoPlay />
                  </el-icon></h3>
                </div>
              </div>

              <div class="video-info">
                <el-text line-clamp="2" class="title-font-size">{{item.title}}</el-text>
                <div class="detail">
                  <el-text type="info" class="info-font-size">
                    <el-icon class="iconfont">
                      <VideoPlay />
                    </el-icon>
                    {{item.playCount}}
                  </el-text>
                  <el-text type="info" class="info-font-size">
                    <el-icon class="iconfont">
                      <StarFilled />
                    </el-icon>
                    {{item.collectCount}}
                  </el-text>
                </div>
                <el-text type="info" class="info-font-size" style="margin-top: 10px">{{item.publisherName}}</el-text>
                <div class="video-date">
                  <el-text type="info" class="info-font-size video-date-text" style="margin-top: 10px">{{item.createTime}}</el-text>
                </div>
              </div>
              <div class="video-mask"></div>
            </div>
          </el-space>
          <div v-if="tabPosition === '热门视频'" class="page-select">
            <el-pagination background v-model:page-size="pageSize" v-model:current-page="pageNum" layout="prev, pager, next" :total="allHotVideo.length" @current-change="handlePageChange"/>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import Header from "../../components/HeaderVue.vue";
import {Refresh, Search, Star, StarFilled, VideoPlay} from "@element-plus/icons-vue";
import router from "../../../router/index.js";
import {nextTick, reactive, ref, watch} from "vue";
import {
  getAiRecommendTargetSubjectVideo,
  getHotVideo,
  getRecommendVideo,
  getTargetSubjectVideoList,
  updateVideoData
} from "../../../api/video/StudentVideo.js";
import {ElLoading} from "element-plus";
import {isPermission} from "../../../utils/utils.js";

export default {
  name: 'StudentVideo',
  methods: {isPermission},
  computed: {
    Refresh() {
      return Refresh
    },
    Star() {
      return Star
    }
  },
  components: {Search, VideoPlay, StarFilled, Header},
  setup() {
    // 当前选择的tab
    let tabPosition = ref('个性推荐');
    // 用于存储展示视频的变量
    let videoItems = ref([]);
    // 备份所有热门视频
    let allHotVideo = ref([]);
    // 当前正在使用的tab名
    const classes = ['个性推荐','热门视频'];
    // 判断是否进入科目分类框
    let hasEnter = ref(false);
    // 用户搜索内容
    let searchContent = ref();
    // 分页 当前第几页
    let pageNum = ref(1);
    // 分页 每一页多少条
    let pageSize = ref(15);
    // 备份所有视频
    let allVideo = ref([]);
    const subjectClass = ref([
      {
        icon: 'rgzn.png',
        title: '人工智能',
      },
      {
        icon: 'dsj.png',
        title: '大数据',
      },
      {
        icon: 'qd.png',
        title: '前端',
      },
      {
        icon: 'hd.png',
        title: 'java后端',
      },
      {
        icon: 'sf.png',
        title: '算法',
      },
      {
        icon: 'sjjg.png',
        title: '数据结构',
      },
      {
        icon: 'mj.png',
        title: '面经',
      },
      {
        icon: 'byyl.png',
        title: '编译原理',
      },
    ])
    /*---------------常规方法---------------*/
    const backHome=()=>{
      router.push('/home')
    }
    function cardChangeActive(e) {
      let popover = document.querySelector('.bew-popover')
      popover.style.height = "125px"
      popover.style.display = "block"
    }
    function cardRemoveActive(e) {
      let popover = document.querySelector('.bew-popover')
      setTimeout(()=>{
        // 之前没有进入分类框
        if ( hasEnter.value === false ) {
          popover.style.height = "0px"
          popover.style.display = "none"
        }
      },2000)
    }
    function popoverChangeActive(e) {
      hasEnter.value = true;
    }
    function popoverRemoveActive(e) {
      hasEnter.value = false;
      let popover = document.querySelector('.bew-popover')
      popover.style.height = "0px"
      popover.style.display = "none"
    }
    function clickVideo(id) {
      updateVideoData(id);
      router.push('/student/playVideo/'+id)
    }
    // 教师点击返回我的视频页面
    function backMyVideo() {
      console.log('调用了')
      router.push("/teacher/myVideo");
    }
    // 分页 点击页面切换内容
    function handlePageChange() {
      // 清空当前内容
      videoItems.value = [];
      // 重新加入内容
      for ( let i = (pageNum.value-1)*pageSize.value ; i < Math.min(pageNum.value*pageSize.value,allHotVideo.value.length) ; i ++ ) {
        videoItems.value.push(allHotVideo.value[i])
      }
    }
    /*---------------请求方法---------------*/
    // 当进入页面时，获取推荐视频
    function getInitRecommendVideo() {
      let targetDom = document.querySelector('.video-area')
      let loading = ElLoading.service({
        text: "视频加载中......",
        spinner: "",
        target: targetDom,
      })
      getRecommendVideo().then(res=>{
        videoItems.value = res.data;
        allVideo.value = res.data
        nextTick(() => {
          loading.close()
        })
      })
    }
    // 调用该方法
    getInitRecommendVideo();
    // 根据指定科目进行查询
    function getTargetSubjectVideo(title) {
      let targetDom = document.querySelector('.video-area')
      let loading = ElLoading.service({
        text: "视频加载中......",
        spinner: "",
        target: targetDom,
      })
      if ( tabPosition.value === '个性推荐' ) {
        getAiRecommendTargetSubjectVideo(title).then(response => {
          videoItems.value = [];
          allHotVideo.value = response.data;
          allVideo.value = response.data
          for ( let i = 0 ; i < Math.min(allHotVideo.value.length,pageSize.value) ; i ++ ) {
            videoItems.value.push(allHotVideo.value[i]);
          }
          nextTick(() => {
            loading.close()
          })
        })
      }else {
        getTargetSubjectVideoList(title).then(response => {
          videoItems.value = response.data;
          allVideo.value = response.data
          nextTick(() => {
            loading.close()
          })
        })
      }
    }
    function getVideo() {
      let targetDom = document.querySelector('.video-area')
      let loading = ElLoading.service({
        text: '视频加载中......',
        spinner: '',
        target: targetDom,
      })
      if ( tabPosition.value === '个性推荐' ) {
        getRecommendVideo().then(res=>{
          videoItems.value = res.data;
          allVideo.value = res.data
          nextTick(() => {
            loading.close()
          })
        })
      }else {
        getHotVideo().then(res => {
          videoItems.value = [];
          allHotVideo.value = res.data;
          allVideo.value = res.data
          for ( let i = 0 ; i < Math.min(allHotVideo.value.length,pageSize.value) ; i ++ ) {
            videoItems.value.push(allHotVideo.value[i]);
          }
          nextTick(() => {
            loading.close()
          })
        })
      }
    }
    watch(searchContent,(newValue,oldValue)=>{
      // 从videoItems中选择出标题包含searchContent的项
      console.log(newValue)
      console.log(allVideo.value)
      if ( newValue === '' || newValue.length <= 0 ) {
        videoItems.value = allVideo.value
      }else {
        videoItems.value = allVideo.value.filter(item => item.title.includes(newValue))
      }
    })

    return {
      tabPosition,
      classes,
      videoItems,
      subjectClass,
      searchContent,
      pageNum,
      pageSize,
      allHotVideo,
      handlePageChange,
      getVideo,
      backHome,
      backMyVideo,
      cardChangeActive,
      cardRemoveActive,
      popoverChangeActive,
      popoverRemoveActive,
      clickVideo,
      getTargetSubjectVideo,
    }
  }
}
</script>